import React, { useEffect } from "react";
import "./Mytabbar.less";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import { withRouter } from "react-router-dom";
import Home1 from "../../images/Tabbar/home_1.png";
import Home2 from "../../images/Tabbar/home_2.png";
import Fast from "../../images/Tabbar/fast.png";
import User1 from "../../images/Tabbar/my_1.png";
import User2 from "../../images/Tabbar/my_2.png";

function MyTabbar(props) {
  // 路由跳转的初始值
  let initvalue = 0;
  // Tabbar显示的初始值
  let initshow = true;
  // 初始页面为0 首页
  const [value, setValue] = React.useState(initvalue);
  const [show, setShow] = React.useState(initshow);

  useEffect(() => {
    switch (props.history.location.pathname) {
      case "/": //对根路径的处理
        setValue(0);
        setShow(true);
        break;
      case "/home":
        setValue(0);
        setShow(true);
        break;
      case "/fast":
        setValue(1);
        setShow(true);
        break;
      case "/user":
        setValue(2);
        setShow(true);
        break;
      default:
        setShow(false);
        break;
    }
  }, [props.history.location.pathname]);

  return (
    <BottomNavigation
      value={value}
      // onChange={(event, newValue) => {
      //   // 用newValue判断需要跳转的页面
      //   if (newValue === 0) {
      //     props.history.push("/home");
      //   } else if (newValue === 1) {
      //     props.history.push("/fast");
      //   } else if (newValue === 2) {
      //     props.history.push("/user");
      //   }
      //   // setValue(newValue);
      //   // setShow(initshow);
      // }}
      onChange={(event, newValue) => {
        setValue(newValue);
        switch (newValue) {
            case 0:
                props.history.push('/home');
                break;
            case 1:
                props.history.push('/fast');
                break;
            case 2:
                props.history.push('/user');
                break;
            default:
                break;
        }
    }}
      showLabels
      className="mytabbar"
      style={{ display: show ? "flex" : "none" }}
    >
      <BottomNavigationAction
        label="首页"
        icon={
          <img
            src={props.location.pathname === "/home" ? Home1 : Home2}
            alt=""
          ></img>
        }
      />
      <BottomNavigationAction
        label="快速刷题"
        icon={<img src={Fast} alt=""></img>}
      />
      <BottomNavigationAction
        label="我的"
        icon={
          <img
            src={props.location.pathname === "/user" ? User1 : User2}
            alt=""
          ></img>
        }
      />
    </BottomNavigation>
  );
}
export default withRouter(MyTabbar);
